<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">


        <h1 class="title ui-widget-header ui-corner-all">CommandButton</h1>
        <div class="entry">
            <p>CommandButton extends the standard h:commandButton with ajax, partial processing and skinning features.</p>

            <h:form id="form">

                <p:panel id="panel" header="New Person" style="margin-bottom:10px;">
                    <p:messages id="messages" />
                    <h:panelGrid columns="3">
                        <h:outputLabel for="firstname" value="Firstname: *" />
                        <p:inputText id="firstname" value="#{pprBean.firstname}" required="true" label="Firstname">
                            <f:validateLength minimum="2" />
                        </p:inputText>
                        <p:message for="firstname" />

                        <h:outputLabel for="surname" value="Surname: *" />
                        <p:inputText id="surname" value="#{pprBean.surname}" required="true" label="Surname"/>
                        <p:message for="surname" />
                    </h:panelGrid>
                </p:panel>

                <p:commandButton value="Ajax Submit" id="ajax" update="panel,display" actionListener="#{pprBean.savePerson}" style="margin-right:20px;" styleClass="ui-priority-primary"/>

                <p:commandButton value="Non-Ajax Submit" id="nonAjax" actionListener="#{pprBean.savePerson}" style="margin-right:20px;" ajax="false" />

                <p:commandButton value="With Icon" id="withIcon" actionListener="#{pprBean.savePerson}" update="panel,display" style="margin-right:20px;" icon="ui-icon-disk" />

                <p:commandButton actionListener="#{pprBean.savePerson}" id="iconOnly" update="panel,display" style="margin-right:20px;" icon="ui-icon-disk" title="Icon Only"/>

                <p:commandButton value="Disabled" id="disabled" style="margin-right:20px;" disabled="true" />

                <p:panel id="display" header="Information" style="margin-top:10px;">
                    <h:panelGrid columns="2">
                        <h:outputText value="Firstname: " />
                        <h:outputText id="txt1" value="#{pprBean.firstname}" />

                        <h:outputText value="Surname: " />
                        <h:outputText id="txt2" value="#{pprBean.surname}" />
                    </h:panelGrid>
                </p:panel>

            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="commandButton.xhtml">
                    <pre name="code" class="xml">
        &lt;h:form id="form"&gt;

            &lt;p:panel id="panel" header="New Person" style="margin-bottom:10px;"&gt;
                &lt;p:messages id="messages" /&gt;
                &lt;h:panelGrid columns="3"&gt;
                    &lt;h:outputLabel for="firstname" value="Firstname: *" /&gt;
                    &lt;p:inputText id="firstname" 
                        value="\#{pprBean.firstname}" required="true" label="Firstname"&gt;
                        &lt;f:validateLength minimum="2" /&gt;
                    &lt;/p:inputText&gt;
                    &lt;p:message for="firstname" /&gt;

                    &lt;h:outputLabel for="surname" value="Surname: *" /&gt;
                    &lt;p:inputText id="surname" 
                        value="\#{pprBean.surname}" required="true" label="Surname"/&gt;
                    &lt;p:message for="surname" /&gt;
                &lt;/h:panelGrid&gt;
            &lt;/p:panel&gt;

            &lt;p:commandButton value="Ajax Submit" update="panel,display" id="ajax"
                     actionListener="\#{pprBean.savePerson}" styleClass="ui-priority-primary"/&gt;

            &lt;p:commandButton value="Non-Ajax Submit" actionListener="\#{pprBean.savePerson}" 
                    ajax="false" /&gt;

            &lt;p:commandButton value="With Icon" actionListener="\#{pprBean.savePerson}" id="withIcon" 
                    update="panel,display" icon="ui-icon-disk" /&gt;

            &lt;p:commandButton actionListener="\#{pprBean.savePerson}" update="panel,display" id="iconOnly"
                    icon="ui-icon-disk" title="Icon Only"/&gt;

            &lt;p:commandButton value="Disabled" disabled="true" id="disabled" /&gt;

            &lt;p:panel id="display" header="Information" style="margin-top:10px;"&gt;
                &lt;h:panelGrid columns="2"&gt;
                    &lt;h:outputText value="Firstname: " /&gt;
                    &lt;h:outputText value="\#{pprBean.firstname}" /&gt;

                    &lt;h:outputText value="Surname: " /&gt;
                    &lt;h:outputText value="\#{pprBean.surname}" /&gt;
                &lt;/h:panelGrid&gt;
            &lt;/p:panel&gt;

        &lt;/h:form&gt;
                    </pre>
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>